<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="lib/core/Utility/LBUtility.js"type="text/javascript"></script>
<script src="lib/org/Frame/Frame.js"type="text/javascript"></script>
<script src="lib/org/Screen/Screen.js"type="text/javascript"></script>
<script src="lib/org/HitableShape/HitableShape.js"type="text/javascript"></script>
<script src="lib/org/HitableShape/HitablePool.js"type="text/javascript"></script>
<title>碰撞引擎测试</title>
<style type="text/css">
/* 屏幕canvas样式 */
.screen{
	border:solid #000 1px;
}
/* 左右分两栏样式 */
.left_splite_2{
	float:left;	
}
.left_splite_2 div{
	width:50%;
	float:left;
}
footer{
	clear:both;
}
</style>
</head>
<header>
<h1>碰撞引擎测试</h1>
</header>
<body>
<h2>Frame:</h2>
<div>Frame:<span id="frame">-</span></div>
<div>Status:<span id="status">-</span></div>
<div>FPS:<span id="fps">-</span></div>
<button id="action_start">start</button>
<button id="action_pause">pause</button>
<button id="action_resume">resume</button>
<button id="action_stop">stop</button>
<button id="action_fps_add">FPS +</button>
<button id="action_fps_sub">FPS -</button>
<div>
<h2>screen:</h2>
<div class="left_splite_2" style="width:500px">
    <div>
        <span id="screen"></span>
    </div>
    <div>
        <button id="action_clear">clear</button>
        <br />
        <button id="action_draw">draw</button>
        <br />
        <button id="action_animate">animate</button>
        <br />
        <button id="action_animate_stop">animate stop</button>
    </div>
</div>
</div>
<div>
<h2 style="clear:both">hit test:</h2>

<div class="left_splite_2" style="width:1024px">
    <div>
        <span id="screen_for_hit_test"></span>
    </div>
    <div>
    	<span>hit:</span>
        <pre id="hit_debug_data">x</pre>
    	<span>adjacent (have some bug not fixed):</span>
        <pre id="adjacent_debug_data">x</pre>
    	<span>debug:</span>
        <pre id="debug">x</pre>
    </div>
    <div>
    </div>
</div>
</div>
<script type="text/javascript">
document.getElementsByTagName('body')[0].onload	= function () {

	LBUtility.getInstance().ready(function () {

		var	scale	= 10;

		Frame.initailize();
		HitableShape.initailize();
		HitablePool.initailize();
		
		var	scrn	= new	Screen({
			"width"		: 20,
			"height"	: 40,
			"scale"		: scale,
			"holder"	: document.getElementById("screen_for_hit_test")
		});
		scrn.getCanvasElement().className	= 'screen';

		var	matrix		= [
			[1,1,1,1],
			[1,0,0,1],
			[1,0,0,1],
			[1,1,1,1]
		];
		var	hitablePool		= new HitablePool;
		var	fixedShape		= new HitableShape(matrix);
		var	hitShape		= new HitableShape(matrix);
		hitablePool.appendShape(fixedShape);
		hitablePool.appendShape(hitShape);
		fixedShape.setPosition(8, 8);
		scrn.getRender().draw();
		var	shapeRander	= new LBRenderImage({
			"src"			: 'assets/debug.gif',
			"sourceWidth"	: scale,
			"sourceHeight"	: scale,
			"displayWidth"	: scale,
			"displayHeight"	: scale
		});
		hitShape.debugByRender(scrn.getRender(), shapeRander, scale);
		fixedShape.debugByRender(scrn.getRender(), shapeRander, scale);
		
		scrn.getCanvasElement().addEventListener('mousemove', function (event) {
			scrn.clear();
			var	posX	= Math.floor(event.offsetX / scale);
			var	posY	= Math.floor(event.offsetY / scale);
			hitShape.setPosition(posX, posY);
			hitablePool.hitTest();

			fixedShape.addEventListener('hitableShape.hit', function (eventHit) {
				
				document.getElementById('hit_debug_data').innerHTML	= eventHit._target.getID();
			});
			
			/**
			 * some bug on here
			 */			
			fixedShape.addEventListener('hitableShape.adjacent', function (eventAdjacent) {
				
				document.getElementById('adjacent_debug_data').innerHTML	= eventAdjacent._target.getID();
			});
		});
	
		/**
		 * 帧引擎测试用例初始化
		 */
		initializeFrameTestCase();
	
		/**
		 * 屏幕渲染擎测试用例初始化
		 */
		initializeScreenTestCase();
	});
	
	LBUtility.getInstance().initailize();
}


//{{{帧引擎

function	printEventStatus (event) {
	
	document.getElementById('status').innerHTML = event._target._status;
}

function	initializeFrameTestCase () {
	
	Frame.initailize();
	
	var	frameEngine	= new Frame(
		{
			"FPS"	: 1
		}
	);
	frameEngine.addEventListener(
		'frame.enterFrame',
		function (event) {

			document.getElementById('frame').innerHTML = event._target._currentFrame;
		}
	);
	frameEngine.addEventListener('frame.start', printEventStatus);
	frameEngine.addEventListener('frame.pause', printEventStatus);
	frameEngine.addEventListener('frame.resume', printEventStatus);
	frameEngine.addEventListener('frame.stop', printEventStatus);
	document.getElementById('status').innerHTML = frameEngine._status;
	document.getElementById('fps').innerHTML 	= frameEngine._currentFPS;
	
	document.getElementById('action_start').onclick	= function () {

		frameEngine.start();
	}
	document.getElementById('action_pause').onclick	= function () {

		frameEngine.pause();
	}
	document.getElementById('action_resume').onclick	= function () {

		frameEngine.resume();
	}
	document.getElementById('action_stop').onclick	= function () {

		frameEngine.stop();
	}
	document.getElementById('action_fps_add').onclick	= function () {

		frameEngine.changeFPS(frameEngine._currentFPS + 1);
		document.getElementById('fps').innerHTML 	= frameEngine._currentFPS;
	}
	document.getElementById('action_fps_sub').onclick	= function () {

		frameEngine.changeFPS(frameEngine._currentFPS - 1);
		document.getElementById('fps').innerHTML 	= frameEngine._currentFPS;
	}
}

//帧引擎}}}

function	initializeScreenTestCase () {
	
	Frame.initailize();
	
	var	scrn	= new	Screen({
		"width"		: 50,
		"height"	: 80,
		"scale"		: 5,
		"holder"	: document.getElementById("screen")
	});
	scrn.getCanvasElement().className	= 'screen';
	var	bgRender	= new LBRenderImage({
		"src"			: 'assets/earth.jpg',
		"sourceWidth"	: scrn.getRealWidth(),
		"sourceHeight"	: scrn.getRealHeight(),
		"displayWidth"	: scrn.getRealWidth(),
		"displayHeight"	: scrn.getRealHeight()
	});
	var	nyancat		= new LBRenderImage({
		"src"			: 'assets/nyan-cat-small.gif',
		"sourceWidth"	: -1,
		"sourceHeight"	: -1,
		"displayWidth"	: -1,
		"displayHeight"	: -1
	});
	scrn.getRender().appendLayer(bgRender);
	scrn.getRender().appendLayer(nyancat);
	scrn.getRender().draw();
	var	animateEngin	= new Frame({
		"FPS"	: 48
	});
	var	deltaXbg	= 1;
	var	deltaYbg	= 1;
	var	deltaXcat	= 1;
	var	deltaYcat	= 1;
	animateEngin.addEventListener(
		'frame.enterFrame',
		function (event) {

			deltaXbg	= bgRender._sourceX + deltaXbg > 0 && bgRender._sourceX + deltaXbg < (bgRender.getImage().width - scrn.getRealWidth())
						? deltaXbg
						: 0 - deltaXbg;
			deltaYbg	= bgRender._sourceY + deltaYbg > 0 && bgRender._sourceY + deltaYbg < (bgRender.getImage().height - scrn.getRealHeight())
						? deltaYbg
						: 0 - deltaYbg;
			deltaXcat	= nyancat._positionX + deltaXcat > 0 && nyancat._positionX + deltaXcat < (scrn.getRealWidth() - nyancat.getImage().width)
						? deltaXcat
						: 0 - deltaXcat;
			deltaYcat	= nyancat._positionY + deltaXcat > 0 && nyancat._positionY + deltaXcat < (scrn.getRealHeight() - nyancat.getImage().height)
						? deltaYcat
						: 0 - deltaYcat;

			bgRender.setConfig({
				"sourceX"	: bgRender._sourceX + deltaXbg,
				"sourceY"	: bgRender._sourceY + deltaYbg
			});
			nyancat.setPosition(deltaXcat, deltaYcat);
			scrn.clear();
			scrn.getRender().draw();
		}
	);
	document.getElementById('action_clear').onclick	= function () {
		scrn.clear();
	}
	document.getElementById('action_draw').onclick	= function () {
		bgRender.setConfig({
			"sourceX"		: 0,
			"sourceY"		: 0
		});
		scrn.getRender().draw();
	}
	document.getElementById('action_animate').onclick	= function () {
		animateEngin.start();
	}
	document.getElementById('action_animate_stop').onclick	= function () {
		
		animateEngin.stop();
	}
}

</script>
</body>
<footer>
sanders.yao@gmail.com
</footer>
</html>